<template>
  <div class="news-detail">
    <div class="news-container" v-loading="loading">
      <div v-if="news" class="news-content">
        <h1 class="news-title">{{ news.title }}</h1>
        <div class="news-meta">
          <div class="meta-left">
            <span class="news-category">{{ getCategoryLabel(news.category) }}</span>
            <span class="news-date">{{ formatDate(news.publishTime) }}</span>
          </div>
          <div class="news-tags">
            <el-tag
              v-for="tag in news.tags"
              :key="tag"
              size="small"
              effect="plain"
              class="tag"
            >
              {{ tag }}
            </el-tag>
          </div>
        </div>
        
        <div class="news-cover" v-if="news.coverImage">
          <el-image
            :src="news.coverImage"
            fit="cover"
            :preview-src-list="[news.coverImage]"
          >
            <template #error>
              <div class="image-error">
                <el-icon><Picture /></el-icon>
              </div>
            </template>
          </el-image>
        </div>

        <div class="news-summary">
          {{ news.summary }}
        </div>

        <div class="news-body" v-html="news.content"></div>
      </div>

      <div v-else-if="!loading" class="news-not-found">
        <el-empty description="新闻不存在或已被删除">
          <template #extra>
            <el-button type="primary" @click="$router.push('/news')">返回新闻列表</el-button>
          </template>
        </el-empty>
      </div>
    </div>

    <!-- 相关新闻推荐 -->
    <div class="related-news" v-if="relatedNews.length > 0">
      <h3 class="section-title">相关新闻</h3>
      <el-row :gutter="20">
        <el-col v-for="item in relatedNews" :key="item.id" :xs="24" :sm="12" :md="8">
          <router-link :to="{ name: 'NewsDetail', params: { id: item.id }}" class="related-news-card">
            <el-card shadow="hover">
              <div class="related-news-content">
                <h4 class="related-news-title">{{ item.title }}</h4>
                <p class="related-news-summary">{{ item.summary }}</p>
                <span class="related-news-date">{{ formatDate(item.publishTime) }}</span>
              </div>
            </el-card>
          </router-link>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { Picture } from '@element-plus/icons-vue'
import { getNewsDetail, getRelatedNews } from '@/api/news'
import { formatDate } from '@/utils/date'

const route = useRoute()
const router = useRouter()

const loading = ref(false)
const news = ref(null)
const relatedNews = ref([])

const getCategoryLabel = (category) => {
  const categoryMap = {
    campus: '校园新闻',
    academic: '学术动态',
    notice: '通知公告'
  }
  return categoryMap[category] || category
}

const fetchNewsDetail = async () => {
  loading.value = true
  try {
    const res = await getNewsDetail(route.params.id)
    if (res.code === 200) {
      news.value = res.data
      // 获取相关新闻
      const relatedRes = await getRelatedNews(route.params.id)
      if (relatedRes.code === 200) {
        relatedNews.value = relatedRes.data
      }
    } else {
      news.value = null
    }
  } catch (error) {
    console.error('获取新闻详情失败:', error)
    news.value = null
  } finally {
    loading.value = false
  }
}

onMounted(() => {
  fetchNewsDetail()
})
</script>

<style scoped>
.news-detail {
  max-width: 1000px;
  margin: 0 auto;
  padding: 24px;
}

.news-container {
  background: #fff;
  border-radius: 8px;
  padding: 32px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.news-title {
  font-size: 28px;
  font-weight: 600;
  color: #333;
  margin: 0 0 20px;
  line-height: 1.4;
}

.news-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 12px;
}

.meta-left {
  display: flex;
  align-items: center;
  gap: 16px;
  color: #666;
  font-size: 14px;
}

.news-category {
  color: var(--el-color-primary);
}

.news-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.news-cover {
  margin-bottom: 24px;
  border-radius: 8px;
  overflow: hidden;
}

.news-cover .el-image {
  width: 100%;
  max-height: 400px;
}

.image-error {
  width: 100%;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f5f7fa;
  color: #909399;
  font-size: 24px;
}

.news-summary {
  font-size: 16px;
  line-height: 1.8;
  color: #666;
  margin-bottom: 24px;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 4px;
}

.news-body {
  font-size: 16px;
  line-height: 1.8;
  color: #333;
}

.news-not-found {
  padding: 48px 0;
  text-align: center;
}

.related-news {
  margin-top: 48px;
}

.section-title {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 24px;
  color: #333;
}

.related-news-card {
  display: block;
  text-decoration: none;
  color: inherit;
  margin-bottom: 20px;
}

.related-news-content {
  padding: 16px;
}

.related-news-title {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 12px;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.related-news-summary {
  font-size: 14px;
  color: #666;
  margin: 0 0 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.related-news-date {
  font-size: 12px;
  color: #999;
}

@media (max-width: 768px) {
  .news-detail {
    padding: 16px;
  }

  .news-container {
    padding: 20px;
  }

  .news-title {
    font-size: 24px;
  }

  .news-meta {
    flex-direction: column;
    align-items: flex-start;
  }
}
</style> 